<template>

    <!-- 右键触发的区域 -->
    <div class="right-click-area" @contextmenu.prevent="openContextMenu">
        右键点击此处
    </div>

    <!-- Element 下拉菜单（模拟右键菜单） -->
    <el-dropdown :class="['', 'top-['+y+'px]', 
        'left-['+x+'px]']" ref="contextMenu" trigger="contextmenu" :visible="isMenuVisible" @command="handleCommand">
        <span>&nbsp;</span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="copy">复制</el-dropdown-item>
                <el-dropdown-item command="paste">粘贴</el-dropdown-item>
                <el-dropdown-item command="cut" divided>剪切</el-dropdown-item>
                <el-dropdown-item command="delete" disabled>删除</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>

</template>

<script setup lang="ts" name="testMouseRight">
import { ref } from 'vue'

const isMenuVisible = ref(false)
const contextMenu = ref<any>(null)
let x = ref<number>(0)
let y = ref<number>(0)
// 右键点击时触发
const openContextMenu = (event:any) => {
    isMenuVisible.value = true
    // 手动设置菜单位置（基于鼠标坐标）
    
    if (contextMenu.value) {
        console.log("鼠标位置", event.clientX, event.clientY)
        x.value = event.clientX - 200
        y.value = event.clientY - 120
        contextMenu.value.$el.style.left = `${x.value}px`
        contextMenu.value.$el.style.top = `${y.value}px`
        contextMenu.value.handleClose()
        contextMenu.value.handleOpen()
    }
    
}

// 菜单项点击事件
const handleCommand = (command:string) => {
    isMenuVisible.value = false
    switch (command) {
        case 'copy':
            console.log('复制')
            break
        case 'paste':
            console.log('粘贴')
            break
        case 'cut':
            console.log('剪切')
            break
        case 'delete':
            console.log('删除')
            break
    }
}


</script>

<style scoped></style>
